<template>
  <n-space vertical>
    <n-layout>
      <n-layout-header bordered>
        <n-space
          justify="space-around"
          size="large"
        >
          <n-menu
            v-model:value="surfaceSetting.menuKey"
            mode="horizontal"
            :options="menuOptions"
          />
        </n-space>
      </n-layout-header>
      <n-layout>
        <template v-if="surfaceSetting.menuKey === '设置'">
          <template v-if="!Setting.checkIsValid(setting)">
            <n-tag type="error"> 请选择路径 </n-tag>
          </template>
          <SettingPanel v-model="editSettings"></SettingPanel>
        </template>
        <template v-if="Setting.checkIsValid(setting)">
          <template v-if="surfaceSetting.menuKey === '生活模式'">
            <lifeModelPanel></lifeModelPanel>
          </template>
          <template v-if="surfaceSetting.menuKey === '阶段'">
            <fieldPanel></fieldPanel>
          </template>
          <template v-if="surfaceSetting.menuKey === '任务'">
            <OperationPanel></OperationPanel>
          </template>
          <template v-if="surfaceSetting.menuKey === '回忆'">
            <MemoryPanel></MemoryPanel>
          </template>
          <template v-if="surfaceSetting.menuKey === '统计'">
            <StatPanel></StatPanel>
          </template>
          <template v-if="surfaceSetting.menuKey === '测试'">
            <HelloWorld msg="Vite + Vue" />
          </template>
        </template>
      </n-layout>
      <n-layout-footer bordered><n-space justify="space-around">steward</n-space> </n-layout-footer>
    </n-layout>
  </n-space>
</template>

<script setup>
import HelloWorld from "./HelloWorld.vue";
import fieldPanel from "./field/fieldPanel.vue";
import lifeModelPanel from "./lifeModel/lifeModelPanel.vue";
import MemoryPanel from "@/components/memory/MemoryPanel.vue";
import OperationPanel from "@/components/operation/OperationPanel.vue";
import SettingPanel from "@/components/setting/SettingPanel.vue";
import StatPanel from "@/components/stat/StatPanel.vue";
import { Setting } from "@model/setting";
import UseSetting from "@pinias/UseSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { renderIcon } from "@utils/CommonUtils";
import { WineOutline as WineIcon } from "@vicons/ionicons5";
import { NMenu, NSpace } from "naive-ui";
import { reactive, ref } from "vue";

const { getSurfaceSetting } = UseSurfaceSetting();
const surfaceSetting = getSurfaceSetting();
const menuOptions = ref([
  {
    label: "生活模式",
    key: "生活模式",
    icon: renderIcon(WineIcon),
  },
  {
    label: "阶段",
    key: "阶段",
    icon: renderIcon(WineIcon),
  },
  {
    label: "任务",
    key: "任务",
    icon: renderIcon(WineIcon),
  },
  {
    label: "统计",
    key: "统计",
    icon: renderIcon(WineIcon),
  },
  {
    label: "回忆",
    key: "回忆",
    icon: renderIcon(WineIcon),
  },
  {
    label: "设置",
    key: "设置",
    icon: renderIcon(WineIcon),
  },
  {
    label: "测试",
    key: "测试",
    icon: renderIcon(WineIcon),
  },
]);

const { getSetting } = UseSetting(pinia);
const setting = getSetting();

// 设置相关参数
const editSettings = reactive({
  flag: true,
  hello: "banana",
});
</script>
